import 'package:animation/api/video.dart';
import 'package:animation/components/AlertDialog/my_loading.dart';
import 'package:animation/components/appbar_base.dart';
import 'package:animation/components/images/image_load.dart';
import 'package:animation/model/play_video_base.dart';
import 'package:animation/pages/other/videos/video_play.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

import '../../../tools/route_animation.dart';

class BilibiliPage extends StatefulWidget {
  final String msg;
  final int ssid;
  final String cover;
  const BilibiliPage(
      {super.key, required this.msg, required this.ssid, required this.cover});

  @override
  State<BilibiliPage> createState() => _BilibiliPageState();
}

class _BilibiliPageState extends State<BilibiliPage> {
  String title = '';
  String intro = '';
  bool isLoading = false;
  List<PlayVideoBase> videoList = [];
  void getAnimation() async {
    if (!mounted) return;
    setState(() {
      isLoading = true;
    });
    try {
      Response res = await getVideo(ssid: widget.ssid);
      var datas = res.data['season'];
      if (res.statusCode == 200) {
        setState(() {
          title = datas['title'] ?? '';
          intro = datas['intro'] ?? '';
          List videos = res.data['data'] ?? [];
          for (var i = 0; i < videos.length; i++) {
            videoList.add(PlayVideoBase(
              title: '${videos[i]['title']}(${videos[i]['type']})',
              long_title: videos[i]['long_title'] ?? '',
              url: videos[i]['mp4'],
            ));
          }
        });
      }
    } catch (e) {
      print(e);
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    getAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppbarBase(title: widget.msg),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            SizedBox(
              height: 200,
              child: Row(
                spacing: 10,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(5),
                    child: Hero(
                      tag: widget.ssid,
                      child: SizedBox(
                        // 宽度为屏幕宽度
                        width: 150,
                        height: 200,
                        child: ImageLoad(imageUrl: widget.cover),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      height: 200,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Theme.of(context).colorScheme.primaryContainer,
                          boxShadow: [
                            BoxShadow(
                              color: Theme.of(context).colorScheme.shadow,
                              offset: Offset(1, 1),
                              blurRadius: 1,
                            ),
                          ]),
                      child: isLoading
                          ? Center(
                              child: MyLoading(
                                type: 2,
                              ),
                            )
                          : Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: ListView(
                                children: [Text(intro)],
                              ),
                            ),
                    ),
                  )
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(
                    onPressed: () {
                      setState(() {
                        // 数组倒序
                        videoList = videoList.reversed.toList();
                      });
                    },
                    icon: Icon(Icons.import_export)),
                IconButton(onPressed: () {}, icon: Icon(Icons.favorite_border)),
              ],
            ),
            Expanded(
                child: isLoading
                    ? Center(
                        child: MyLoading(
                          type: 2,
                          size: 50,
                        ),
                      )
                    : GridView.builder(
                        itemCount: videoList.length,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: 8,
                          mainAxisSpacing: 8,
                          childAspectRatio: 3,
                        ),
                        itemBuilder: (context, index) {
                          return Material(
                            color:
                                Theme.of(context).colorScheme.primaryContainer,
                            borderRadius: BorderRadius.circular(5),
                            shadowColor: Theme.of(context).colorScheme.shadow,
                            clipBehavior: Clip.antiAlias,
                            elevation: 2,
                            child: InkWell(
                              onTap: () {
                                RouteAnimation().animateRoute(
                                  context,
                                  VideoPlay(
                                    videoList: videoList,
                                    activeIndex: index,
                                    title: title,
                                  ),
                                );
                              },
                              child: Center(
                                child: Text(
                                  videoList[index].title,
                                ),
                              ),
                            ),
                          );
                        })),
          ],
        ),
      ),
    );
  }
}
